<template>
  <div>{{ userLocation }}</div>
  <div>{{ userGeolocation }}</div>
  <hr />
  <!-- 接受传递的方法，直接改变父组件的参数 -->
  <button @click="updateUserLocation">改变</button>

  <hr />
  {{ readonly }}
</template>

<script>
import { inject } from "vue";

export default {
  setup() {
    const userLocation = inject("location", "The Universe");
    const userGeolocation = inject("geolocation");
    const updateUserLocation = inject("updateLocation");
    // 接受只读属性
    const readonly = inject("readonly");

    return {
      userLocation,
      userGeolocation,
      updateUserLocation,
      readonly,
    };
  },
};
</script>
